<template>
  <div class="app-container">
    <!--    头部-->
    <div class="my-detail-header">
      <div>
        <span class="my-header-name">{{ form.bomCode }}</span>
        <span class="my-header-code">{{ form.bomVersion }}</span>
      </div>
      <el-descriptions :column="4">
        <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ form.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="修改人">{{ form.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ form.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--    身体-->
    <div class="my-detail-body">
      <el-tabs type="border-card">
        <el-tab-pane label="物料信息">
          <el-divider>
            <div class="my-divider">基础信息</div>
          </el-divider>
          <el-descriptions :column="2" :colon="false">
            <el-descriptions-item :labelStyle="descLabelStyle" label="BOM编号">{{ form.bomCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="BOM版本">{{ form.bomVersion }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="默认BOM">
              {{ form.isDefault }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="成品名称">
              {{ form.gbsGood ? form.gbsGood.pdName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="成品编号">
              {{ form.gbsGood ? form.gbsGood.pdCode : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="规格型号">
              {{ form.gbsGood ? form.gbsGood.pdSpecType : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="单位">
              {{ form.gbsGood && form.gbsGood.gbsGoodUnit ? form.gbsGood.gbsGoodUnit.guName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="日产量">
              {{ form.bomDailyOutput }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="物料配件">
          <el-table
            :data="selectedMaterials"
            :row-key="getRowKey"
            :tree-props="{children: 'gbsBomMaterials'}"
          >
            <el-table-column
              type="selection"
              align="center"
            />
            <el-table-column
              type="index"
              align="center"
              label="序号"
            />
            <el-table-column label="物料编码" align="center" prop="gbsMaterial.pdCode" width="180"
                             show-overflow-tooltip
            />
            <el-table-column label="物料名称" align="center" prop="gbsMaterial.pdName" />
            <el-table-column label="规格型号" align="center" prop="gbsMaterial.pdSpecType" />
            <el-table-column label="单位" align="center" prop="gbsMaterial.gbsGoodUnit.guName" />
            <el-table-column label="BOM编号" align="center" prop="bmBomCode" />
            <el-table-column label="BOM版本" align="center" prop="bmBomVersion" />
            <el-table-column label="使用量" align="center" prop="bmUse" />
            <el-table-column label="使用比例" align="center" prop="bmUse" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.gbsMaterial.isMaterial==='0' && !scope.row.gbsBomMaterials"
                  size="mini"
                  type="text"
                  @click="handleToAddBom(scope.row)"
                  v-hasPermi="['gbs:bom:edit']"
                >添加BOM
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--    关闭按钮-->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" />
  </div>
</template>

<script>
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import { getBom } from '@/api/yyj/gbs/bom'

export default {
  name: 'BomDetail',
  components: { MyConfirmBtnGroup },
  data() {
    return {
      backPage: '/gbs/bom',
      form: {},
      descLabelStyle: {
        minWidth: '120px !important'
      },
      selectedMaterials: [],
      bomCode: '',
      bomVersion: ''
    }
  },
  created() {
    this.bomCode = this.$route.query.bomCode
    this.bomVersion = this.$route.query.bomVersion
    this.getDetail(this.bomCode, this.bomVersion)
  },
  methods: {
    // 去添加BOM
    handleToAddBom(row) {
      const pdCode = row.gbsMaterial.pdCode
      this.$router.push({
        path: `/gbs/son-bom-add/${pdCode}`,
        query: {
          bomCode: this.bomCode,
          bomVersion: this.bomVersion
        }
      })
    },
    // 获取主键
    getRowKey(row) {
      console.log(row)
      return row.bmBomCode + '' + row.bmBomVersion + '' + row.bmMaterialCode
    },
    /** 查询详情 */
    async getDetail(bomCode, bomVersion) {
      const res = await getBom({
        bomCode,
        bomVersion
      })
      this.form = res.data
      this.selectedMaterials = res.selectedMaterials
      console.log('firstRes ', res)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/yyj/detail";
</style>
